<template>
  <div class="box">
    <div class="top">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in list.pics" :key="index"
          ><img :src="item.pic" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="center">
      <p>{{ list.basicInfo.name }}</p>
      <p>{{ list.basicInfo.characteristic }}</p>
      <div>
        <span><small>低价</small>￥{{ list.basicInfo.minPrice }}</span>
        <span><small>原价</small>￥{{ list.basicInfo.originalPrice }}</span>
        <span> 库存{{ list.basicInfo.stores }}</span>
      </div>
    </div>
    <div>
      <van-tabs v-model="active">
        <van-tab title="商品介绍"
          ><div class="dv1" v-html="list.content"></div>
          {{}}</van-tab
        >
        <van-tab title="商品评价" safe-area-inset-bottom="hh"
          ><div
            class="evaluatebox"
            v-for="(item, index) in evaluation"
            :key="index"
          >
            <div class="left">
              <van-icon
                name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
                size="4rem"
              />
            </div>
            <div class="right">
              <span>{{ item.user.nick }}</span>
              <span class="sp1">{{ item.goods.goodReputationStr }}</span>
              <p class="p1">{{ item.goods.goodReputationRemark }}</p>
              <div>
                <span>{{ item.goods.dateReputation }}</span
                ><br />
                <span>{{ item.goods.property }}</span>
              </div>
            </div>
          </div></van-tab
        >
      </van-tabs>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="go" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="ShoppingCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <van-popup v-model="showss" position="bottom" :style="{ height: '40%' }">
      <div class="tanbox">
        <div class="top">
          <img :src="list.basicInfo.pic" alt="" />
          <div>
            <p>{{ list.basicInfo.name }}</p>
            <p>￥{{ list.basicInfo.minPrice }}</p>
          </div>
        </div>
        <div v-for="(item, index) in list.properties" :key="index">
          <div>{{ item.name }}</div>
          <van-button
            type="default"
            v-for="(item, index) in item.childsCurGoods"
            :key="index"
            >{{ item.name }}</van-button
          >
          <div></div>
        </div>
        <div class="buttom">
          <span>购买数量</span>
          <van-stepper v-model="value" />
        </div>
        <van-button type="danger" size="large" @click="add()"
          >加入购物车</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
// import Vue from "vue";
// import { Icon } from "vant";
// Vue.use(Icon);
// import "../components/css/1.css"
import "../../components/css/goodsData.css";
export default {
  data() {
    return {
      list: [],
      active: 0,
      evaluation: [],
      hh: true,
      showss: false,
      value: 1,
      ids: this.$route.query.id,
    };
  },
  mounted() {
    var id = this.$route.query.id;
    console.log(this.$route.query.id);
    this.$API.shouxiangqing({ id: id }).then((res) => {
      this.list = res.data.data;
      console.log(res);
      //   console.log(list.properties[1].childsCurGoods.name);
    });

    this.$API.Requestevaluation({ goodsId: id }).then((res) => {
      this.evaluation = res.data.data;
      //   console.log(res.data.data);
    });
  },
  methods: {
    ShoppingCart() {
      //   console.log(123);
      this.showss = true;
    },
    add() {
      if (localStorage.getItem("token")) {
        // this.$store.commit("add", id);
        this.$router.push({ path: "/Shopping", query: { id: this.ids } });
        this.showss = false;
        // this.$router.push("/Shopping");
      } else {
        this.$router.push("/login");
      }
    },
    go() {
      if (localStorage.getItem("token")) {
        // this.$store.commit("add", id);
        this.$router.push("/Shopping");
      } else {
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.evaluatebox {
  width: 100%;
  display: flex;
  margin: 1rem 0;
  .left {
    width: 30%;
    .v1 {
      // width: 100%;
    }
  }
  .right {
    width: 70%;
    .sp1 {
      color: white;
      background: red;
    }
    .p1 {
      margin: 0.5rem 0;
    }
  }
}
.buttom {
  height: 3rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.tanbox {
  width: 100%;
  .top {
    width: 100%;
    display: flex;
    img {
      width: 20%;
    }
  }
}
</style>